<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8"/>
	<style type="text/css">
   
      

     
      
      .father{
      	width: 100px;
      	height: 100px;
      	background-color:pink;
      	/*第一种绝对定位：当没有父包含块时，其相对与浏览器窗口左上角定位，*/
      	/*并且具有偏移属性的*/
      	position: relative;
      	
      }

     .son{
            width: 30px;
            height: 20px;
            background-color:red;
            /*第二种绝对定位：当有父包含块时，其相对与父包含块左上角定位，*/
            /*并且具有偏移属性的  父包含块 position: relative;*/
            position: absolute;
            top: 20px;
            left: 30px;
            
      }


	</style>
      

</head>
<body>
     <div class="father">
            <div class="son"></div>         
  

     </div>
    
    
      
  


</body>
</html>


